<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>



    <!-- 
        1、父子 props
        2、子父 $emit
        3、兄弟 let bus = new Vue()
        4、$refs  $child $parent
        5、路由传值,session传值,storage传值



     -->
    <div id="app">
        {{msg}}
        <hr>
        <father-component></father-component>
    </div>
    <script>
        Vue.component('father-component', {
            data() {
                return {
                    name: "父组件内容",
                    age: 40
                }
            },
            methods: {
                checkSon() {
                    console.log(this.$refs);
                    console.log(this.$refs.mySon.name);
                    console.log(this.$refs.mySon.address);
                }
            },
            template: `
                <div>
                    <h1>父组件</h1>
                    <button @click="checkSon">查看子组件的属性</button>
                    <hr>
                    <h4>子组件</h4>
                    <son-component ref="mySon"></son-component>
                </div>
            `
        });
        Vue.component('son-component', {
            data() {
                return {
                    name: "子组件内容",
                    address: ['beijing', 'shanghai']
                }
            },
            methods: {
                checkParent() {
                    console.log(this.$parent);
                    console.log(this.$parent.name);
                    console.log(this.$parent.age);
                }
            },
            template: `
                <div>
                    <button @click="checkParent">查看父组件内容</button>
                </div>
            `
        });

        new Vue({
            el: "#app",
            data: {
                msg: "hello"
            }
        })
    </script>

</body>

</html>